import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)


//import indexPage from '../views/index.vue'
import loginPage from '../views/login.vue'
 
// 1. 定义路由组件.
// const Home = { template: '<div>Home</div>' }
// const About = { template: '<div>About</div>' }

//2.路由表
const routes = [
    { path: '/', redirect: '/index' },    //app默认页面
    { 
      path: '/index', 
      component:() => import('../views/index'),
      redirect:'/index/banners',
      meta:{title: '首页'},
      children: [
        { 
          path:'banners',
          meta:{title: '轮播图管理'},
          component:() => import('../views/shouye/banner'),
          beforeEnter: (to, from,next) => {
            // reject the navigation
            //return false
            console.log('独享守卫')
            next()
          },
        },
        { path:'category',meta:{title: '分类管理'},component:() => import('../views/shouye/category')},
        { path:'recomend',meta:{title: '为你推荐管理'},component:() => import('../views/shouye/recomend')},
        { path:'news', meta:{title:'商品新闻管理'},component:() => import('../views/news')}
      ]
    },
    { path: '/login', component:loginPage }
  ]

//3.创建路由实列
const router = new VueRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    //history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })


///导航守卫
router.beforeEach((to, from,next) => {
  // ...
  // 返回 false 以取消导航
  console.log(to,from)
  //return to
  next()
})


export default router